<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>数据权限</title>
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .el-form-item {
            margin-bottom: 10px;
        }
        .el-button+.el-button {
            margin-left: 0px;
        }
        .el-button--primary {
            margin-bottom: 10px;
        }
        .content-container .tab-menu {
            padding: 0px 20px;
            background: #F5F7FA;
            height: 50px;
            border-bottom: solid 1px #e6e6e6;
        }

        .content-container .tab-menu .title {
            font-size: 22px;
            color: #000000;
            line-height: 22px;
            margin-right: 20px;
        }
        .operation-menu {
            border-bottom: 1px solid #DCDFE6;
        }
        .no-border {
            border: 0px;
        }

        .content-container .content-nav {
            background: #F5F7FA;
            height: 15px;
        }

        .operation-menu>div:not(:last-child) {
            border-bottom: 1px solid #DCDFE6;
        }

        .operation-menu .operation-menu__button {
            padding: 10px 20px;
        }

        .operation-menu .operation-menu__search {
            padding: 10px 20px 0px 0px;
        }

        .operation-menu .operation-menu__search .search-condition .search-item {
            float: left;
            display: inline-block;
            margin: 0px 20px 10px 0px;
        }

        .operation-menu .operation-menu__search .search-condition .search-item .label {
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
            line-height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .operation-menu .operation-menu__search .search-condition .search-item .search-input {
            display: inline-block;
        }

        .pageination-container {
            width: 100%;
            text-align: right;
            box-sizing: border-box;
            padding-right: 20px;
            margin-top: 40px;
        }

    </style>
</head>

<body style="display: none;">
<div id="app" class="container" flex>
    <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>数据权限</div>
            </div>
            <div flex-box="1">
                <div class="operation-menu">
                    <div class="operation-menu__button" flex>
                        <div flex-box="0">
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0">
                                    <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addUser">添加新权限</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="operation-menu">
                    <div class="operation-menu__button" flex>
                        <div flex-box="0">
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0" class="search-condition">
                                    <div class="search-item">
                                        <span class="label">权限名称</span>
                                        <div class="search-input">
                                            <el-input v-model="username" placeholder="" size="small"></el-input>
                                        </div>
                                    </div>
                                </div>
                                <div flex-box="0">
                                    <el-button type="primary" size="small">搜索</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-nav"></div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="number" label="id"></el-table-column>
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="account" label="键值(key)"></el-table-column>
                    <el-table-column prop="company" label="取值(value)"></el-table-column>
                    <el-table-column label="操作"  width="180">
                        <template slot-scope="scope">
                            <el-button type="default" size="small" @click="permissionEdit = true">编辑</el-button>
                            <el-button type="default" size="small" @click="userConfig = true">配置人员</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageination-container">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-admin-menu>

    <!--编辑权限-->
    <el-dialog title="编辑权限" :visible.sync="permissionEdit" width="330px">
        <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.ruleName" auto-complete="off" style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="键值key" :label-width="formLabelWidth">
                <el-input v-model="form.ruleName" auto-complete="off" style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="取值value" :label-width="formLabelWidth">
                <el-input v-model="form.ruleName" auto-complete="off" style="width: 180px;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="permissionEdit = false">保 存</el-button>
        </div>
    </el-dialog>

    <!--配置人员-->
    <el-dialog title="配置人员" :visible.sync="userConfig" width="540px">
        <div style="margin-top: -20px;">
            <el-transfer
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入用户名称"
                    :titles="['未配置用户', '已配置用户']"
                    v-model="value2"
                    :data="data">
            </el-transfer>
            <div class="operation-menu no-border">
                <div class="operation-menu__search" flex="cross:top">
                    <div flex-box="1"></div>
                    <div flex-box="0">
                        <el-button type="primary" size="small" @click="userConfig = false">保存</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.comon.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            const generateData2 = function() {
                const data = [];
                const cities = ['荣辉', '绥俊', '小辉', '加紧', '钟山'];
                const pinyin = ['ronghui', 'suijun', 'xiaohui', 'jiajin', 'zhongshan'];
                cities.forEach(function(city, index) {
                    data.push({
                        label: city,
                        key: index,
                        pinyin: pinyin[index]
                    });
                });
                return data;
            };
            return {
                data: generateData2(),
                value2: [],
                filterMethod(query, item) {
                    return item.pinyin.indexOf(query) > -1;
                },
                dialogDefinitionChange: false,
                dialogSettlementRule: false,
                dialogResultOfChange: false,
                dialogSureSave: false,
                permissionEdit: false,
                userConfig: false,
                form: {
                    ruleName: '',
                    module: '',
                    scale: '',
                    beginTime: '',
                    endTime: '',
                    effect: '',
                },
                form1: {
                    balanceValue: '',
                    gradientBegin: '',
                    gradientEnd: '',
                },
                formLabelWidth: '100px',
                visible: false,
                options: [{
                    value: '选项1',
                    label: '是'
                }, {
                    value: '选项2',
                    label: '否'
                }],
                tableData: [
                    {
                        number: '0001',
                        name: '啦啦啦啦',
                        account: '15911111111',
                        company: '金宝贝',
                        character: '普通员工',
                        accountStatus: '启用'
                    },
                    {
                        number: '0001',
                        name: '啦啦啦啦',
                        account: '15911111111',
                        company: '金宝贝',
                        character: '普通员工',
                        accountStatus: '启用'
                    },
                ],
                multipleSelection: [],
                username: '',
                value: '',
                currentPage4: 4,
                // 来自test_data.js
                menus: menus,
                // 来自test_data.js
                userDetail: userDetail
            }
        },
        methods: {
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //修改定义保存
            definitionChange() {
                //请求数据......
                this.dialogResultOfChange = true;
                this.dialogDefinitionChange = false;
            },
            //修改结算规则保存
            settlementRule() {
                //请求数据......
                this.dialogResultOfChange = true;
                this.dialogSettlementRule = false;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            saveNewRule() {
                if(this.multipleSelection.length<1) {
                    this.$alert('还没勾选任何项目', '提醒', {
                        confirmButtonText: '确定',
                        callback: function(action) {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                }else {
                    //确定保存？
                    this.dialogSureSave = true;
                }
            },
            //确认保存
            sureSave() {
                this.dialogSureSave = false;
                this.dialogResultOfChange = false;
            },
            addUser() {
                window.location.href = 'add_user.html';
            },
            logout() {
                window.location.href = 'login.html';
            },
            handleSizeChange(val) {
                console.log();
            },
            handleCurrentChange(val) {
                console.log();
            },
        },
        mounted() {
            document.querySelector('body').style.display = 'block';
        }
    });
</script>
</html>
